<template>
    <div class="ele-body">
      <!-- 数据表格 -->
      <el-card shadow="never">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px" >
        <el-card  style="margin-top: -10px">
          <el-row :gutter="24">
            <el-col :md="24" :sm="24">
              <el-form-item label="公司名称:"  prop="companyName">
                <el-input v-model="form.companyName" placeholder="请输入公司名称" clearable>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :md="24" :sm="24">
                <el-form-item label="公司简称:"  prop="shortName">
                  <el-input v-model="form.shortName" placeholder="请输入公司简称" clearable>
                  </el-input>
                </el-form-item>
            </el-col>
            <el-col :md="24" :sm="24">
              <el-form-item label="售后电话:" prop="tel" > 
                <el-input v-model="form.tel"  placeholder="请输入售后电话" clearable />
              </el-form-item>
            </el-col>
            <el-col :md="24" :sm="24">
              <el-form-item label="电子邮箱:">
                <el-input v-model="form.email" placeholder="请输入电子邮箱" clearable />
              </el-form-item>
            </el-col>
            <el-col :md="24" :sm="24">
              <el-form-item label="公司地址:">
                <el-input v-model="form.address" placeholder="请输入公司地址"  clearable />
                <!-- <span>
                  <i class="el-icon-location-outline"  @click="choseLocation" style="color: silver;"></i>
                </span> -->
                <el-button slot="append" icon="el-icon-location-outline" style="color: silver;"></el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :md="24" :sm="24">
              <el-form-item label="关于我们:" >
                <el-input type="textarea" :rows="4" placeholder="请输入关于我们" v-model="form.content" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :md="24" :sm="24">
              <el-form-item label="服务条款:" >
                <el-input type="textarea" :rows="4" placeholder="请输入服务条款" v-model="form.serviceRange" />
              </el-form-item>
            </el-col>
          </el-row>
           <el-row :gutter="24">
            <el-col :md="24" :sm="24">
              <el-form-item label="免责申明:" >
                <el-input type="textarea" :rows="4" placeholder="请输入免责申明" v-model="form.disclaimer" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <el-card >
        <div slot="header" class="clearfix">
          <span style="font:bold">平台Log信息</span>
        </div>
        <el-row :gutter="20">
          <el-col :md="24" :sm="24">
            <el-upload action="#" ref="upload" list-type="picture-card" :auto-upload="false" :file-list="fileList" :class="{ hide: hideUpload }" :on-change="handleChange" :limit="limit">
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{file}">
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" >
                <span class="el-upload-list__item-actions">
                  <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)" >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span v-if="!removeDisable" class="el-upload-list__item-delete" @click="handleRemove(file)" >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible" :modal="false">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </el-col>
        </el-row>
        <el-row>
          <el-col :md="24" :sm="24">
            <div style="display:inline" >
              <div style="float:left"></div>
              <div style="float:right">
                  <el-button type="primary" :loading="loading" @click="save" >保存</el-button>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-card>
      </el-form>
      </el-card>
      <ele-map-picker :need-city="true" :lock-scroll="false" :show.sync="showPicker" @done="onChoose" :center="center" />
    </div>
  </template>
  
  <script>
    import map from "@/components/Map/map";
    import upload from "@/components/UpLoad/index.js";
    import { QueryAttchmentByBusinessId } from '@/api/attchment';
    import { UpdateCompany, QueryCurrentCompany} from '@/api/usermanager/company';
    import EleMapPicker from 'ele-admin/packages/ele-map-picker';
    export default {
      name: 'Company',
      mixins: [upload,map],
      components: { EleMapPicker },
      data() {
        return {
          center:[],
          // 提交状态
          loading: false,
          // 是否显示地图选择弹窗
          showPicker: false,
          form: { },
          // 表单验证规则
          rules: {
            name: [{required: true,message: '请输入公司名称',trigger: 'blur'}],
            phone: [{required: true,message: '请输入售后电话',trigger: 'blur'}],
          },
        };
      },
      created(){
        this.limit = 1;
        this.initData();
       },
      methods: {

        initData() {
          QueryCurrentCompany()
            .then((res) => {

              this.form = {};
              this.form = res;
              this.$message.success(res.msg);
              this.setAttchement(res.id);
            })
            .catch((e) => {
              this.$message.error(e.message);
            });
        },
        choseLocation() {
          if (this.form.longitude != undefined && this.form.latitude != undefined) {
            this.center = [this.form.longitude, this.form.latitude];
            // window.editForm = this.editForm;
          }  
          this.showPicker = true
        },
        /* 地图选择后回调 */
        onChoose(location) {
          this.form.address = location.name + ' ' + location.address
          this.form.longitude = location.lng
          this.form.latitude = location.lat
          this.showPicker = false;
        },
        /* 保存编辑 */
        save() {
          this.$refs['form'].validate((valid) => {
            if (!valid) {
              return false;
            }

            this.loading = true;

             //上传图片
            this.fileList.map((f) => {
              if (f.file != undefined) {
                f.fileType = 1;
                f.imgType = 1;
                this.uploadImg(f);
              }
            });
            
            UpdateCompany({...this.form})
              .then((msg) => {
                this.loading = false;
                this.$message.success(msg);
              })
              .catch((e) => {
                this.loading = false;
                this.$message.error(e.message);
              });
          });
        },

         //上传图片
        handleChange(file, fileList) {
          this.hideUpload = fileList.length >= this.limit;
          let obj = {
            orderIndex: 1, //默认值
            imtType: 1,
            attType: 1, //文件类型(1:图片,2:文件)
            file: file.raw, // 文件流
            fileName: file.name, // 文件名称
            url:file.url,// 文件路径
          }
          //索引
          if(fileList!=null && fileList.length>0){
            obj.orderIndex = fileList.length;
          }
          //业务id 新增页面时，从后台获取Guid
          if(this.form){
            obj.businessId = this.form.id;  
          }
          //文件列表
          this.fileList.push(obj);

          //设置上传图片按钮是否可见
          if(this.fileList!=null && this.fileList!=undefined){
            this.hideUpload = this.fileList.length >= this.limit;
          }else{
            this.hideUpload =false;
          }
        },

         //赋值到附件
        setAttchement(id){
          QueryAttchmentByBusinessId(id).then((d)=>{
            this.fileList = [];
            d.map((item)=>{
              this.fileList.push({
                id: item.id,
                name: item.fileName,
                url: item.fileAllPath,
                businessId: item.businessId,
                orderIndex: item.orderIndex,
              });
            });

            //设置上传图片按钮是否可见
            this.hideUpload = this.fileList.length >= this.limit;
          });
        },
      }
    };
  </script>
  